"use client";
import { useEffect, useState, useCallback } from "react";
import { EventType, StepType } from "@/module/enum";
import { EventsUtilHelper, LotteryUtilHelper } from "@/module/util";
import Locale from "@/module/locale";
import "./index.css";

const Btn = (props: any) => {
    const { type, text, isVisible, isActive, isMLR, isLetterSpacing } = props;

    const handleBtnClick = async() => {
        await LotteryUtilHelper.main({type, text});
    }

    const setClassName = () => {
        let className = "btn-box";
        if(isVisible){
            className += " visible";
            isMLR && (className += " mlr");
        }
        isActive && (className += " active");
        return className;
    }

    return <div className={setClassName()} onClick={handleBtnClick}>
        <button className={`btn${isLetterSpacing ? " btn-ls" : ""}`}>{text}</button>
        <div className="icon-flower"></div>
    </div>
}

const BtnGroup = () => {
    const [btns, setBtns] = useState([]);
    const btnOptions: any = [
        { type: StepType.welcome, text: Locale.Page.EnterDraw, isVisible: true },
        { type: StepType.lottery, text: Locale.Page.Draw, isVisible: false, isActive: true, isLetterSpacing: true },
        { type: StepType.reLottery, text: Locale.Page.ReDraw, isVisible: false, isMLR: true },
        { type: StepType.reset, text: Locale.Page.Reset, isVisible: false, isLetterSpacing: true },
    ];

    const handleAction = useCallback(() => {
        EventsUtilHelper.subscribe(EventType.updateBtnGroup, (params: any) => {
            const { isShowTable, isShowPause, type } = params;
            const newBtnsOptions = btnOptions.map((it: any) => {
                if(it.type === StepType.welcome){
                    it.isVisible = isShowTable;
                }else{
                    it.isVisible = !isShowTable;
                }
                if(it.type === type && type === StepType.lottery){
                    it.text = Locale.Page[!isShowPause ? 'Draw' : 'Pause'];
                }else if(it.type === type && type === StepType.reLottery){
                    it.text = Locale.Page[!isShowPause ? 'ReDraw' : 'Pause'];
                }
                return it;
            });
            setBtns(newBtnsOptions);
        }, LotteryUtilHelper);
    }, [btnOptions]); 

    useEffect(() => {
        handleAction();
    }, [handleAction]);


    return (
        <div className="wl-btns">
            { btns.map((it: any) => <Btn key={it.type} {...it} />)}
        </div>
    )
}

export default BtnGroup;
